<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3 class="page-title">机构信息管理</h3>
			<ul class="breadcrumb">
				<li><i class="icon-home"></i> <a href="<c:url value="/home.html"/>">首页</a><i class="icon-angle-right"></i></li>
				<li><a href="<c:url value="/unit/list.html"/>">机构信息管理</a> <i class="icon-angle-right"></i></li>
				<li><a href="#">新增机构</a></li>
			</ul>
		</div>
	</div>
	<div class="row-fluid">
		<div class="span12">
			<div class="portlet box blue">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-bookmark"></i>新增机构
					</div>
				</div>
				<div class="portlet-body form">
					<c:if test="${messageError!= null}">
						<div class="alert alert-error">
							<strong>错误!</strong>${messageError}
						</div>
					</c:if>
					<form id="unit-form" action="<c:url value='/unit/save.html'/>"	method="post" class="form-horizontal">
						<div class="alert alert-error hide">请检查下面的错误!</div>
						<hr/>
						<span class="label label-info">机构基本信息</span>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构名称:</label>
									<div class="controls">
										<input type="text" name="unitName" class="m-wrap span12"/>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构简称:</label>
									<div class="controls">
										<input type="text" name="unitAlias"  class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<hr/>
						<span class="label label-info">工商税务登记信息</span>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">所在省:</label>
									<div class="controls">
										<select name="provinceName" id="unit_province" class="m-wrap span12">
											<option value="" selected="selected"></option>
											<c:forEach var="region" items="${regionList}">
												<option value="${region.region}">${region.region}</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">所在市:</label>
									<div class="controls">
										<select name="cityName" id="unit_city" class="m-wrap span12"></select>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">所在区县:</label>
									<div class="controls">
										<select name="countyName" id="unit_county" class="m-wrap span12"></select>
										<input type="hidden" name="regionCode"/>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span12">
								<div class="control-group">
									<label class="control-label">机构地址:</label>
									<div class="controls">
										<input type="text" name="address" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<hr/>
						<span class="label label-info">银行账户信息</span>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">主账户开户行:</label>
									<div class="controls">
										<input type="text" name="openBank" class="m-wrap span12"/>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">主账户开户账号:</label>
									<div class="controls">
										<input type="text"  name="accNo" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">主账户开户名:</label>
									<div class="controls">
										<input type="text" name="accName" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<hr/>
						<span class="label label-info">联系信息及其它</span>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">邮编:</label>
									<div class="controls">
										<input type="text" name="unitPost" class="m-wrap span12"/>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">电话:</label>
									<div class="controls">
										<input type="text" name="unitTel" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">传真:</label>
									<div class="controls">
										<input type="text" name="unitFax" class="m-wrap span12"/>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构联系人:</label>
									<div class="controls">
										<input type="text"  name="busName" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构联系电话:</label>
									<div class="controls">
										<input type="text"  name="busPhone" class="m-wrap span12"/>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构联系E-MAIL:</label>
									<div class="controls">
										<div>
											<input type="text"name="busEmail" class="m-wrap span12"/>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">机构联系QQ:</label>
									<div class="controls">
										<input type="text"  name="busQq" class="m-wrap span12"/>
									</div>
								</div>
							</div>
						</div>
						<div class="form-actions">
							<button class="btn blue" type="submit"><i class="icon-ok"></i>保存</button>
							<a href="<c:url value="/unit/list.html" />" class="btn black" type="button"><i class="icon-share-alt" ></i>返回</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$("#unit_province").bind("change",function(){
		var province_name = $(this).val();
		$.ajax({
			url:"<c:url value="/provinceCity/getUndRegionByRegion.html"/>",
			data:{region:province_name},
			type:"post",
			dataType:"json",
			success:function(responseText){
				$("#unit_city").html("").append("<option value=''>请选择所在市</option>");
				$("#unit_county").html("");
				$.each(responseText,function(i,v){
					$("#unit_city").append($("<option value='"+v.region+"' data-code='"+v.code+"'>"+v.region+"</option>"));
				});
			}
		});
	});
	
	$("#unit_city").bind("change",function(){
		var city_code = $(this).find("option:selected").data("code");
		$.ajax({
			url:"<c:url value="/provinceCity/getUndRegionByCode.html"/>",
			data:{code:city_code},
			type:"post",
			dataType:"json",
			success:function(responseText){
				$("#unit_county").html("");
				$.each(responseText,function(i,v){
					$("#unit_county").append($("<option value='"+v.region+"' code="+v.code+">"+v.region+"</option>"));
				});
				//绑定修改事件
				$("#unit_county").bind("change",function(){
					var code = $(this).find("option:selected").attr("code");
					$("input[name=regionCode]").val(code);
				});
			}
		});
	});
	
	$.validator.addMethod("checkAccNo",function(value,attributes,param){
		var reg = /^\d{32}$/g; // 以32位数字开头，以32位数字结尾
		return reg.test(value);
	});
	
	$.validator.addMethod("notAllNum",function(value,attributes,param){
		var reg = /[^0-9]+/;
		return reg.test(value);
	});
	
	var form = $("#unit-form");
	var error = $(".alert-error",form);
	form.validate({
		errorElement :"span",
		errorClass: "help-inline",
		rules:{
			"unitName":{
				required:true,
				maxlength:100,
				remote:{
					type:"post",
					url:"<c:url value="/unit/unique.html"/>",
					data:{unitName: function(){return form.find("input[name='unitName']").val();}}
				},
				notAllNum:true
			},
			"address":{
				required:true,
				maxlength:120,
				notAllNum:true
			},
			"unitAlias":{
				required:true,
				maxlength:200
			},
			"provinceName":{
				required:true
			},
			"post":{
				required:true,
				digits:true,
				rangelength:[6,6]
			},
			"unitTel":{
				required:true,
				rangelength:[11,11],
				digits:true
			},
			"unitFax":{
				required:true,
				rangelength:[11,11],
				digits:true
			},
			"busName":{
				required:true,
				maxlength:60,
				notAllNum:true
			},
			"busPhone":{
				required:true,
				rangelength:[11,11],
				digits:true
			},
			"busEmail":{
				required:true,
				email:true,	
				maxlength:60
			},
			"busQQMSN":{
				maxlength:60
			},
			"accNo":{required:true,checkAccNo:true,digits:true},
			"accName":{required:true,notAllNum:true},
			"openBank":{required:true,notAllNum:true}
		}	
		,messages:{
			"unitName":{
				required:"请填写机构名称",
				maxlength:"机构名称长度最大为200",
				isUnique:"机构名称已经存在，请重新填写。",
				notAllNum:"不能为纯数字"
			},
			"address":{
				required:"请填写机构地址",
				maxlength:"机构地址长度最大为120"
			},
			"unitAlias":{
				required:"请填写机构简称",
				maxlength:"机构简称长度最大为200",
				notAllNum:"不能为纯数字"
			},
			"provinceName":{
				required:"请选择机构所在省"
			},
			"post":{
				required:"请填写邮编",		
				digits: "请输入数字",
				rangelength: "邮政编码为6位数字"
			},
			"unitTel":{
				required:"请填写电话",
				rangelength:"请填写带区号的11位电话号",
				digits:"电话只能为数字"
			},
			"unitFax":{
				required:"请填写传真",
				rangelength:"请填写带区号的11位传真号",
				digits:"传真只能为数字"
			},
			"busName":{
				required:"请填写业务联系人",
				maxlength:"业务联系人长度最大只能为60",
				notAllNum:"不能为数字"
			},
			"busPhone":{
				required:"请填写业务联系电话",
				rangelength:"请填写11位电话号",
				digits:"业务联系电话只能为数字"
			},
			"busEmail":{
				required:"请填写业务联系Email",
				email:"请填写正确的邮箱地址",	
				maxlength:"业务联系邮箱长度最大只能为60"
			},
			"busQQMSN":{
				maxlength:"业务联系QQ长度只能为60"
			},
			"accNo":{required:"请填写开户行账号",checkAccNo:"请填写32位的开户行账号",digits:"请填写正确的开户行账号"},
			"accName":{required:"请填写开户行名称",notAllNum:"不能为纯数字"},
			"openBank":{required:"请填写开户行名",notAllNum:"不能为纯数字"}
		},
		invalidHandler: function (event, validator) {
            error.show();
            App.scrollTo(error, -200);
        },
        highlight: function (element) {
            $(element).closest(".help-inline").removeClass("ok");
            $(element).closest(".control-group").removeClass("success").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").removeClass("error");
        },
        success: function (label) {
            label.addClass("valid").addClass("help-inline ok").closest(".control-group").removeClass("error").addClass("success");
        },
        submitHandler: function (form) {
            form.submit();
        }
	});
});
</script>